<template>
  <div class="todolist">
    <div class="tabs">
      <h1>todolist</h1>
      <div
        :class="item.id == activeIndex ? 'active' : ''"
        @click="change(item)"
        v-for="item in tabs"
        :key="item.id"
      >
        {{ item.msg }}
      </div>
    </div>
    <div class="show"><component :is="com"></component></div>
  </div>
</template>

<script setup>
import com1 from "../components/page/page1.vue";
import com2 from "../components/page/page2.vue";
import com3 from "../components/page/page3.vue";
import { ref } from "vue";
let activeIndex = ref(1);
let com = ref("com1");
let tabs = ref([
  { id: 1, msg: "一", com: com1 },
  { id: 2, msg: "er", com: com2 },
  { id: 3, msg: "san", com: com3 },
]);
let change = (ele) => {
  activeIndex.value = ele.id;
  com = ele.com;
};
</script>

<style scoped>
.todolist {
  width: 500px;
  height: 300px;
  border: 1px solid gray;
}
.tabs div {
  text-align: center;
  width: 50px;
  height: 30px;
  line-height: 30px;
  border: 1px solid black;
}
.active {
  background: aqua;
  color: orange;
}
</style>
